<template>
  <div class="header_wrap_scoped">
    <div id="scene">
      <div class="header_wrap_back" data-depth="0.2"></div>
      <img
        class="icons_01"
        data-depth="-0.1"
        src="../assets/icons/layer4.png"
        alt=""
      />
      <img
        class="icons_02"
        data-depth="0.1"
        src="../assets/icons/shape2.png"
        alt=""
      />
      <img
        class="icons_03"
        data-depth="-0.1"
        src="../assets/icons/shape3.png"
        alt=""
      />
      <img
        class="icons_04"
        data-depth="0.1"
        src="../assets/icons/shape7.png"
        alt=""
      />
      <img
        class="icons_05"
        data-depth="-0.1"
        src="../assets/icons/shape8.png"
        alt=""
      />
    </div>
    <div class="wrap_blue">
      <div class="title_wrap">
        <div class="title_wrap_top">
          <div>
            <p>猿前端</p>
            <p>程序员梦工场</p>
          </div>
          <div>
            <span
              v-for="(item, index) in tabList"
              @click="tabs(index)"
              :class="{ Mtabs: num == index }"
            >
              {{ item }}
              <b></b>
            </span>
            <span class="search_wrap" @click="drawer = true"
              ><i class="el-icon-search"></i
            ></span>
          </div>
        </div>
        <div class="title_wrap_bottom">
          <!-- 去登录 -->
          <!-- <div class="gologin_wrap" @click="$router.push('/user')">
            <span>Login?</span>
          </div> -->
        </div>
      </div>

      <!-- 手机端导航 -->
      <div class="scren_wrap">
        <div class="scren_wrap_left">
          <p>猿前端</p>
          <p>程序员梦工厂</p>
        </div>
        <div class="scren_wrap_right">
          <div @click="open()"><i class="el-icon-search"></i></div>
          <div @click="moble_nav_wraps=true"><i class="el-icon-s-operation"></i></div>
        </div>
      </div>
    </div>
    <!-- pc二级隐藏导航  -->
    <div :class="{ navs_wrap: true, active: actives }">
      <div class="title_wrap">
        <div class="title_wrap_top">
          <div>
            <p>猿前端</p>
            <p>程序员梦工场</p>
          </div>
          <div>
            <span
              v-for="(item, index) in tabList"
              @click="tabs(index)"
              :class="{ Mtabs: num == index }"
            >
              {{ item }}
              <b></b>
            </span>
            <span class="search_wrap" @click="drawer = true"
              ><i class="el-icon-search"></i
            ></span>
          </div>
        </div>
      </div>
    </div>
    <div @click="tops()" :class="{ back_top: true, activesTops: activesTop }">
      <i class="el-icon-caret-top"></i>
    </div>

    <!-- pc端搜索弹窗 -->
    <el-drawer
      title="搜索博客"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <input type="text" placeholder="请输入你想查找的博客" />
    </el-drawer>

    <!-- 手机端下拉菜单 -->
    <div class="moble_nav_wraps" v-if="moble_nav_wraps">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>菜单</span>
          <i class="el-icon-circle-close clearfix_icons" @click="exit_meun()"></i>
        </div>
        <div v-for="(item, index) in tabList" :key="index" class="text item" @click="tabs(index)">
         <p><span>{{item}}</span> 
         <i class="el-icon-caret-right"></i></p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Parallax from "../utils/parallax.js";
export default {
  name: "BlogsHeader",

  data() {
    return {
      moble_nav_wraps:false,
      windowWidth:
        document.documentElement.clientWidth || document.body.clientWidth, //实时屏幕宽度
      windowHeight:
        document.documentElement.clientHeight || document.body.clientHeight, //实时屏幕高度
      drawer: false,
      direction: "rtl",
      directions: "ttb",
      num: 0,
      actives: false,
      activesTop: false,
      tabList: ["主页", "文章", "我的"],
      parallaxInstance: null, //移动端去掉鼠标动态
    };
  },
  updated() {
    console.log("update");
  },

  mounted() {
    if (this.windowWidth <= 1000) {
      console.log("手机端");
    } else {
      var scene = document.getElementById("scene");
      this.parallaxInstance = new Parallax(scene, {
        relativeInput: false,
      });
      this.parallaxInstance.friction(0.8, 0.8);
    }
    window.addEventListener("scroll", this.handleScroll);
  },

  methods: {
    // 搜索框
    open() {
      this.$prompt("", "搜索博客", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          console.log(value);
        })
        .catch(() => {
          console.log("取消输入");
        });
    },
    // 退出手机菜单
    exit_meun(){
      this.moble_nav_wraps = false
    },
    handleClose(done) {
      done();
    },
    handleCloses(done) {
      done();
    },
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrollTop >= 90
        ? (this.actives = true) & (this.activesTop = true)
        : (this.actives = false) & (this.activesTop = false);
    },
    tabs(index) {
      this.num = index;
      this.exit_meun()
      if (index == 0) {
        this.$router.push("/");
      } else if (index == 1) {
        this.$router.push("/classify");
      } else if (index == 2) {
        this.$router.push("/my");
      } else if (index == 3) {
        this.$router.push("/my");
      }
    },
    // 回到顶部
    tops() {
      window.scrollTo(0, 0);
    },
  },
  watch: {
    windowHeight(val) {
      let that = this;
      console.log("实时屏幕高度：", val, that.windowHeight);
    },
  },
};
</script>

<style lang="scss">
// 搜索框穿透样式
.el-message-box__wrapper .el-message-box {
  width: 70% !important;
  padding: 25px !important;
}
.el-message-box .el-message-box__headerbtn {
  font-size: 30px !important;
}
.el-message-box__wrapper .el-message-box__title {
  font-size: 30px !important;
}
.el-message-box__wrapper .el-message-box__message > p {
  font-size: 30px !important;
}
.el-message-box__wrapper .el-input__inner {
  height: 60px !important;
}
.el-message-box__wrapper .el-message-box__btns .el-button--small {
  font-size: 20px !important;
}

.el-card {
  margin: 0 auto;
  width: 95% !important;
  height: auto;
  .clearfix > span {
    font-size: 40px !important;
  }
  .clearfix_icons{
    float: right;
    font-size: 50px!important;
  }
}
.el-card__body{
  >.text{
    font-size: 35px!important;
    >p{
      display: flex;
      justify-content: space-between;
    }
  }
}
.moble_nav_wraps {
  width: 100%;
  height: 400px;
  // background: #ff6a3e;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
}

.header_wrap_scoped {
  position: relative;
  height: 365px;

  > #scene {
    width: 100%;
    overflow: hidden;

    .header_wrap_back {
      margin: -20px 0 0 -40px;
      width: 105%;
      height: 390px;
      background: url("../assets/background/back002.jpg") no-repeat;
      background-size: 100% auto;
      background-position: center center;
    }
  }
  .gologin_wrap {
    cursor: pointer;
    z-index: 10;
    color: rgb(255, 255, 255);
    font-weight: 600;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .wrap_blue {
    width: 100%;
    height: 368px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(21, 22, 44, 0.7);

    > .title_wrap {
      height: 100%;
      margin: 0 auto;
      width: 1110px;

      .title_wrap_top {
        display: flex;
        justify-content: space-between;

        > div:nth-child(1) {
          text-align: center;

          > p:nth-child(1) {
            color: #fff;
            font-weight: bold;
            font-size: 30px;
          }

          > p:nth-child(2) {
            color: #fff;
            margin-top: -30px;
            font-weight: bold;
            font-size: 12px;
          }
        }

        > div:nth-child(2) {
          display: flex;
          align-items: center;
          padding: 20px 0;

          > span {
            box-sizing: border-box;
            padding: 10px 0;
            position: relative;
            cursor: pointer;
            color: #fff;
            margin: 0 30px;
            font-size: 16px;
            font-weight: bold;

            > b {
              transition: all 0.1s;
              z-index: 10;
              display: block;
              position: absolute;
              top: -120px;
              left: 45%;
              width: 3px;
              height: 60px;
              background: #ff6a3e;
            }
          }

          > span:hover {
            color: #ff6a3e;

            > b {
              top: -55px;
            }
          }

          .search_wrap {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid rgb(106, 109, 118);
            display: flex;
            justify-content: center;
            align-items: center;

            > i {
              font-size: 20px;
            }
          }
          .user_wrap {
            width: 48px;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;

            > i {
              font-size: 20px;
            }
          }
        }
      }
    }

    .scren_wrap {
      display: none;
      border-bottom: 10px solid #ff6a3e;
      width: 100%;
      height: 160px;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 80px;
      box-sizing: border-box;
      .scren_wrap_left {
        > p {
          margin: 10px;
        }
        > p:nth-child(1) {
          color: #fff;
          font-size: 35px;
        }
        > p:nth-child(2) {
          color: rgb(223, 220, 220);
          font-size: 22px;
        }
      }
      .scren_wrap_right {
        display: flex;
        > div {
          width: 80px;
          height: 80px;
          background: #ff6a3e;
          border-radius: 18px;
          text-align: center;
          margin-left: 40px;
          i {
            line-height: 80px;
            font-size: 40px;
            color: #fff;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .title_wrap {
    display: none;
  }
}
@media screen and (min-width: 1000px) {
  .scren_wrap {
    display: none !important;
  }
}
// 屏幕在(min-width:890px) and (max-width:1120px)区间
@media screen and (min-width: 1000px) and (max-width: 1120px) {
  .header_wrap_scoped {
    position: relative;
    height: 365px;
    > #scene {
      width: 100%;
      overflow: hidden;

      .header_wrap_back {
        margin: -20px 0 0 -40px;
        width: 105%;
        height: 390px;
        background: url("../assets/background/back002.jpg") no-repeat;
        background-size: 100% auto;
        background-position: center center;
      }
    }
    .gologin_wrap {
      cursor: pointer;
      z-index: 10;
      color: rgb(255, 255, 255);
      font-weight: 600;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .wrap_blue {
      width: 100%;
      height: 368px;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(21, 22, 44, 0.7);

      > .title_wrap {
        height: 100%;
        margin: 0 auto;
        width: 860px;
        .title_wrap_top {
          display: flex;
          justify-content: space-between;

          > div:nth-child(1) {
            text-align: center;

            > p:nth-child(1) {
              color: #fff;
              font-weight: bold;
              font-size: 30px;
            }

            > p:nth-child(2) {
              color: #fff;
              margin-top: -30px;
              font-weight: bold;
              font-size: 12px;
            }
          }

          > div:nth-child(2) {
            display: flex;
            align-items: center;
            padding: 20px 0;

            > span {
              box-sizing: border-box;
              padding: 10px 0;
              position: relative;
              cursor: pointer;
              color: #fff;
              margin: 0 30px;
              font-size: 16px;
              font-weight: bold;

              > b {
                transition: all 0.1s;
                z-index: 10;
                display: block;
                position: absolute;
                top: -120px;
                left: 45%;
                width: 3px;
                height: 60px;
                background: #ff6a3e;
              }
            }

            > span:hover {
              color: #ff6a3e;

              > b {
                top: -55px;
              }
            }

            .search_wrap {
              width: 48px;
              height: 48px;
              border-radius: 50%;
              border: 2px solid rgb(106, 109, 118);
              display: flex;
              justify-content: center;
              align-items: center;

              > i {
                font-size: 20px;
              }
            }
            .user_wrap {
              width: 48px;
              height: 48px;
              display: flex;
              justify-content: center;
              align-items: center;

              > i {
                font-size: 20px;
              }
            }
          }
        }
      }
    }
  }
}

.Mtabs {
  color: #ff6a3e !important;
}

.back_top {
  transition: all 0.5s;
  opacity: 0;
  width: 50px;
  height: 50px;
  background: #ff6a3e;
  position: fixed;
  bottom: 600px;
  right: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;

  > i {
    color: #fff;
    font-weight: bold;
    font-size: 22px;
  }
}
@media screen and (max-width:1000px) {
  .back_top {
    width: 80px;
    height: 80px;
     > i {
       line-height: 80px;
    color: #fff;
    font-weight: bold;
    font-size: 50px;
  }
  }
}

.navs_wrap {
  transition: all 0.4s;
  z-index: 999;
  height: 80px;
  width: 100%;
  position: fixed;
  top: -90px;
  left: 0;
  background: #fff;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.06);

  > .title_wrap {
    width: 1110px;
    height: 80px;
    margin: 0 auto;
    height: 100%;
    margin: 0 auto;

    .title_wrap_top {
      display: flex;
      justify-content: space-between;

      > div:nth-child(1) {
        text-align: center;
        height: 80px;
        width: 200px;
        background: #0f1425;
        box-sizing: border-box;
        border-bottom: 5px solid #ff6a3e;

        > p:nth-child(1) {
          margin-top: 7px;
          color: #fff;
          font-weight: bold;
          font-size: 30px;
        }

        > p:nth-child(2) {
          color: #fff;
          margin-top: -30px;
          font-weight: bold;
          font-size: 12px;
        }
      }

      > div:nth-child(2) {
        display: flex;
        align-items: center;
        padding: 0px 0;

        > span {
          box-sizing: border-box;
          padding: 10px 0;
          position: relative;
          cursor: pointer;
          color: #000;
          margin: 0 30px;
          font-size: 16px;
          font-weight: bold;

          > b {
            transition: all 0.1s;
            z-index: 10;
            display: block;
            position: absolute;
            top: -120px;
            left: 45%;
            width: 3px;
            height: 60px;
            background: #ff6a3e;
          }
        }

        > span:hover {
          color: #ff6a3e;

          > b {
            top: -55px;
          }
        }

        .search_wrap {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          border: 2px solid rgb(106, 109, 118);
          display: flex;
          justify-content: center;
          align-items: center;

          > i {
            font-size: 20px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .navs_wrap {
    display: none;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1120px) {
  .navs_wrap {
    transition: all 0.4s;
    z-index: 999;
    height: 80px;
    width: 100%;
    position: fixed;
    top: -90px;
    left: 0;
    background: #fff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.06);

    > .title_wrap {
      width: 860px;
      height: 80px;
      margin: 0 auto;
      height: 100%;
      margin: 0 auto;

      .title_wrap_top {
        display: flex;
        justify-content: space-between;

        > div:nth-child(1) {
          text-align: center;
          height: 80px;
          width: 200px;
          background: #0f1425;
          box-sizing: border-box;
          border-bottom: 5px solid #ff6a3e;

          > p:nth-child(1) {
            margin-top: 7px;
            color: #fff;
            font-weight: bold;
            font-size: 30px;
          }

          > p:nth-child(2) {
            color: #fff;
            margin-top: -30px;
            font-weight: bold;
            font-size: 12px;
          }
        }

        > div:nth-child(2) {
          display: flex;
          align-items: center;
          padding: 0px 0;

          > span {
            box-sizing: border-box;
            padding: 10px 0;
            position: relative;
            cursor: pointer;
            color: #000;
            margin: 0 30px;
            font-size: 16px;
            font-weight: bold;

            > b {
              transition: all 0.1s;
              z-index: 10;
              display: block;
              position: absolute;
              top: -120px;
              left: 45%;
              width: 3px;
              height: 60px;
              background: #ff6a3e;
            }
          }

          > span:hover {
            color: #ff6a3e;

            > b {
              top: -55px;
            }
          }

          .search_wrap {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid rgb(106, 109, 118);
            display: flex;
            justify-content: center;
            align-items: center;

            > i {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}

.active {
  position: fixed;
  top: 0px !important;
  left: 0;
}

.activesTops {
  opacity: 1;
  bottom: 50px;
  z-index: 999;
}

/* 动画 */
.icons_01 {
  animation: move 10s linear infinite;
  width: 100px;
  height: auto;
  position: absolute;
  top: 200px !important;
  left: 80% !important;
}

.icons_02 {
  animation: move1 5s linear infinite;
  position: absolute;
  top: 100px !important;
  left: 10% !important;
}

.icons_03 {
  animation: move1 5s linear infinite;
  position: absolute;
  top: 100px !important;
  left: 90% !important;
}

.icons_04 {
  animation: move 10s linear infinite;
  top: 300px !important;
  left: 40% !important;
}

.icons_05 {
  animation: move2 10s linear infinite;
  top: 200px !important;
  left: 60% !important;
}

@keyframes move {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes move1 {
  0% {
    -webkit-transform: translateX(0px);
  }

  25% {
    -webkit-transform: translateX(-25px);
  }

  50% {
    -webkit-transform: translateX(-35px);
  }

  75% {
    -webkit-transform: translateX(-25px);
  }

  100% {
    -webkit-transform: translateX(0px);
  }
}

@keyframes move2 {
  0% {
    -webkit-transform: translateY(0px);
  }

  25% {
    -webkit-transform: translateY(-25px);
  }

  50% {
    -webkit-transform: translateY(-35px);
  }

  75% {
    -webkit-transform: translateY(-25px);
  }

  100% {
    -webkit-transform: translateY(0px);
  }
}
</style>
